<template>
  <div class="select-seat-footer-container" :style="{ paddingBottom: `${bottomDistance}px` }">
    <nut-cell v-if="selectedSeat.length > 0">
      <scroll-view :scroll-x="true">
        <div class="select-list">
          <div class="item" v-for="(item, index) in selectedSeat" :key="index">
            <div class="left">
              <div class="name">{{ item.seatNo }}</div>
              <div class="price">
                <nut-price :price="formatPrice(item.areaId)" size="small" :decimal-digits="2" :thousands="true" />
              </div>
            </div>
            <div class="right" @click="onCloseItem(item.id)">
              <CircleClose color="#858a99" size="0.6rem"></CircleClose>
            </div>
          </div>
        </div>
      </scroll-view>
    </nut-cell>
    <div class="btns">
      <nut-button v-if="selectedSeat.length > 0" block type="primary" @click="onConfirm"
        color="linear-gradient(to right, #ff6034, #ee0a24)">￥{{ totalPrice }} 确认选座</nut-button>
      <nut-button v-else block type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)">请选择座位</nut-button>
    </div>
  </div>
  <nut-dialog title="确认联系方式" v-model:visible="phoneInputVisible">
    <template v-slot:default>
      <nut-input max-length="11" v-model="phoneValue" placeholder="请输入手机号" type="digit" />
      <div style="
          font-size: 10px;
          color: #858a99;
          text-align: left;
          margin-top: 5px;
          margin-left: 20px;
        ">
        仅用于出票结果通知
      </div>
    </template>

    <template v-slot:footer>
      <nut-row :gutter="10">
        <nut-col :span="12">
          <div class="flex-content">
            <nut-button type="default" block @click="() => {
                phoneInputVisible = false;
              }
              ">取消</nut-button>
          </div>
        </nut-col>
        <nut-col :span="12">
          <div class="flex-content flex-content-light">
            <nut-button :disabled="!formatPhoneInput()" type="primary" block @click="onConfirmPhone">确定</nut-button>
          </div>
        </nut-col>
      </nut-row>
    </template>
  </nut-dialog>
</template>
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useTabbarStore } from "../../store";
import { CircleClose } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import * as orderApi from "../../api/order";
import { onMounted, computed, toRefs, watch, ref } from "vue";
const tabbarStore = useTabbarStore();
const { bottomDistance } = storeToRefs(tabbarStore);
let totalPrice: any = ref(0);
const phoneInputVisible = ref(false);
const phoneValue = ref("15511194837");
const props = defineProps({
  selectedSeat: {
    type: Array<any>,
    default: [],
  },
  arealist: {
    type: Array<any>,
    default: [],
  },
  showInfo: {
    type: Object,
    required: true,
  },
  filmInfo: {
    type: Object,
    required: true,
  },
});
const { selectedSeat, arealist, showInfo, filmInfo } = toRefs(props);
onMounted(() => {
  setBottomDistance();
});
// 校验手机号
const formatPhoneInput: any = computed(() => {
  return () => {
    const re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
    const result = re.test(phoneValue.value);
    if (!result) {
      return false;
    }
    return true;
  };
});
const onConfirm = () => {
  const area_arr = selectedSeat.value.map((item) => {
    return item.areaId;
  });
  const abc = isRepeat(area_arr);
  if (!abc) {
    Taro.showToast({
      title: "请选择同一价格的座位，暂不支持跨区域选座！",
      icon: "none",
      duration: 2000,
    });
    return;
  }
  phoneInputVisible.value = true;
};
const onConfirmPhone = () => {
  phoneInputVisible.value = false;
  purchase();
};
// 锁座下单
const purchase = async () => {
  const seatData = selectedSeat.value.map((item) => {
    return {
      area_id: item.areaId,
      SeatCode: item.id,
      lovestatus: item.lovestatus,
      seatNo: item.seatNo,
    };
  });
  const resultData = {
    tel: phoneValue.value,
    room_id: showInfo.value.showid,
    film_id: filmInfo.value.film_id,
    film_code: filmInfo.value.film_code,
    seat_data: JSON.stringify(seatData),
  };
  Taro.showLoading({
    title: "加载中",
  });
  const res: any = await orderApi.create(resultData);
  const orderId = res.id;
  Taro.redirectTo({
    url: `/pages/order-detail/index?id=${orderId}`,
  });
  Taro.hideLoading();
};
const setBottomDistance = () => {
  const systemInfo = Taro.getSystemInfoSync();
  const safeArea: any = systemInfo.safeArea;
  const res = systemInfo.screenHeight - safeArea.bottom;

  tabbarStore.setBottomDistance(res);
};
watch(props, () => {
  let resPrice = 0;
  selectedSeat.value.forEach((item) => {
    const itemPrice = getPrice(item.areaId);
    resPrice = Number(resPrice) + Number(itemPrice);
  });
  totalPrice.value = resPrice.toFixed(2);
});
const emit = defineEmits(["onCloseItem"]);
const onCloseItem = (id) => {
  console.log(id);

  emit("onCloseItem", id);
};
const formatPrice: any = computed(() => {
  return (id) => {
    return getPrice(id);
  };
});
const getPrice = (id) => {
  if (id === "0" || arealist.value.length === 0) {
    // 无分区
    return showInfo.value.rebate_price;
  } else {
    // 有分区
    const res = arealist.value.find((item) => {
      return item.area === id;
    });
    return Number(res.price.user_price);
  }
};
const isRepeat = (arr) => {
  let res = true;
  const frist_item = arr[0];
  for (var i in arr) {
    if (!(arr[i] === frist_item)) {
      res = false;
    }
  }
  return res;
};
</script>
<style lang="scss">
.select-seat-footer-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 25px;

  .select-list {
    display: flex;
    flex-direction: row;

    .item {
      background: #f6f8f9;
      display: flex;
      flex-direction: row;
      padding: 10px;
      margin-right: 20px;
      border-radius: 10px;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 120px;

        .name {
          font-size: 24px;
          color: #858a99;
        }

        .price {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .nut-price {
            display: flex;
          }
        }
      }

      .right {
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
